<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="名称" prop="name">
                <el-input placeholder="请输入名称" v-model="queryParams.name" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 功能按钮栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                v-hasPermi="['device:cabinetType:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                v-hasPermi="['device:cabinetType:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                v-hasPermi="['device:cabinetType:remove']">删除</el-button>
            </el-col>
        </el-row>

        <!-- 数据展示表格 -->
        <el-table :data="cabinetTypeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="名称" prop="name" width="150" />
            <el-table-column label="总插槽数量" prop="totalSlots" width="110" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="状态" prop="status" width="100">
                <template #default="scope">
                    {{ scope.row.status == "1" ? "正常" : "停用" }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                    v-hasPermi="['device:cabinetType:edit']">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                    v-hasPermi="['device:cabinetType:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 分页条组件 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <el-dialog :title="title" v-model="open" width="600px" append-to-body>
            <el-form ref="cabinetTypeRef" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="总插槽数量" prop="totalSlots">
                    <el-select v-model="form.totalSlots" class="m-2" placeholder="请选择总插槽数量" style="width: 100%">
                        <el-option v-for="item in 20" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>

<script setup name="CabinetType">
import { onMounted, ref } from "vue";
import { addCabinetType, listCabinetType, getCabinetType, updateCabinetType, delCabinetType } from "../../../api/device/cabinetType";
//引入ElMessage组件
import { ElMessage, ElMessageBox } from "element-plus";
import { el } from "element-plus/es/locales.mjs";


//定义分页列表数据模型
const cabinetTypeList = ref([]);
//定义列表总记录数模型
const total = ref(2);
//加载数据时显示的动效控制模型
const loading = ref(true);

// const data = ref({
//     //定义搜索模型
//     queryParams: {
//         pageNum: 1,
//         pageSize: 10,
//     },
// });
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    name: null
});

//=====================================================================查询===========================================
const getList = async () => {
    const res = await listCabinetType(queryParams.value);
    //   console.log(res);
    cabinetTypeList.value = res.rows
    total.value = res.total
    loading.value = false
};
const handleQuery = () => {
    getList()
}
const resetQuery = () => {
    queryParams.value.pageNum = 1
    queryParams.value.pageSize = 10
    queryParams.value.name = null
    handleQuery();
}

//=====================================================================新增===========================================
const open = ref(false)
const form = ref({
    id: null,
    name: null,
    totalSlots: null,
    description: null,
    status: null,
    remark: null
})
const title = ref('柜机类型')
const rules = ref({
    name: [
      { required: true, message: "名称不能为空", trigger: "blur" }
    ],
    totalSlots: [
      { required: true, message: "总插槽数量不能为空", trigger: "blur" }
    ],
})
const handleAdd = () => {
    reset()
    open.value = true
    title.value = "添加柜机类型";
}
const reset = () => {
    form.value.id = null
    form.value.name = null
    form.value.totalSlots = null
    form.value.description = null
    form.value.status = null
    form.value.remark = null
}
const submitForm = async () => {
    if (form.value.id != null) {
        const res = await updateCabinetType(form.value)
        // console.log(res)
        ElMessage.success(res.msg)
    } else {
        const res = await addCabinetType(form.value)
        // console.log(res)
        ElMessage.success(res.msg)
    }
    open.value = false;
    getList();
}
const cancel = () => {
    open.value = false;
    reset();
}

//=====================================================================修改===========================================
const handleUpdate = (row) => {
    // reset()
    // const res = await getCabinetType(row.id)
    // // console.log(res)
    // form.value = res.data
    // open.value = true
    // title.value = "修改柜机类型";
    reset();
    const _id = row.id || ids.value
    getCabinetType(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改柜机类型";
    });
}

//=====================================================================删除===========================================
//定义批量操作id列表模型
const ids = ref([]);
//定义单选控制模型
const single = ref(true);
//定义多选控制模型
const multiple = ref(true);

const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.id)
    // single.value = ids.value.length != 1
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

const handleDelete = (row) => {
    const _ids = row.id || ids.value;
    ElMessageBox.confirm('是否确认删除柜机类型编号为"' + _ids + '"的数据项？', "系统提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(function () {
        return delCabinetType(_ids);
    }).then(() => {
        getList();
        ElMessage.success("删除成功");
    }).catch(() => { });
}

onMounted(() => {
    getList()
})
</script>
